<template>
  <div>
    <a-table :columns="columns" :data-source="data">
      <template slot="age" slot-scope="text, record">
        <a-input
          :value="text"
          placeholder="请输入年龄"
          @change="e => handleChange(e.target.value, record.id, 'age')"
        />
      </template>
    </a-table>
    <div>
      {{ data }}
    </div>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: 'name',
    title: '姓名',
    key: 'name',
    scopedSlots: { customRender: 'bb' }
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    scopedSlots: { customRender: 'age' }
  }
]

const data = []
for (let i = 0; i < 5; i++) {
  data.push({
    name: 'test' + i,
    age: 18 + i,
    gender: i % 2
  })
}
export default {
  data() {
    return {
      data,
      columns
    }
  },
  methods: {
    handleChange(value, key, column) {
      const index = this.data.findIndex(item => item.key === key)
      if (index !== -1) {
        // note: 核心代码
        this.$set(this.data, index, {
          ...this.data[index],
          [column]: value
        })
      }
    }
  }
}
</script>
